<template>
	<view class="detailsBox">
		<view class="detailsNav">  
		<!-- staBox staBoxa staBoxb -->
			<view class="staBox" :class="status==1?'staBox':status==2?'staBoxa':status==3?'staBoxb':''">
				{{status==1?'待审核':status==2?'已审核':status==3?'已拒绝':''}}
			</view>
			<!-- <image v-if="status==1" src="/static/pages/index/modifyImg.png" class="modifyImg" mode=""></image> -->
		</view>
		<!-- 详情区 -->
		<view class="contentBox">
			<view class="contentBox1">
				<view class="contentBox1Titles">
					<view  class="contentBox1Title">
						<view class="wire">
						
						</view>
						<view class="title">
							活动基本信息
						</view>
					</view>
					<!-- <image v-if="status==1" src="/static/pages/index/modifyImg.png" mode="" class="modifyImg" ></image> -->
				</view>
				<view class="titleBox">
					{{objAct.name}}
				</view>
				<view class="funds">
					<view class="fundsW1">
						申请经销店名称：
					</view>
					<view class="fundsW2">
						{{stores}}
					</view>
				</view>
				<view class="funds">
					<view class="fundsW1">
						申请活动时间：
					</view>
					<view class="fundsW2">
						{{objAct.starttime}}--{{objAct.endtime}}
					</view>
				</view>
				<view class="funds">
					<view class="fundsW1">
						活动地址：
					</view>
					<view class="fundsW2">
						{{obj.address}}
					</view>
				</view>
				<view class="quota">
					<view class="quotaW1">
						活动名额：
					</view>
					<view class="quotaW2">
						{{objAct.quota}}
					</view>
				</view>
				<view class="quota">
					<view class="quotaW1">
						剩余名额：
					</view>
					<view class="quotaW2">
						{{objAct.remaining}}
					</view>
				</view>
			<!-- 	<view class="quota">
					<view class="quotaW1">
						活动时间：
					</view>
					<view class="quotaW2">
						{{objAct.starttime}}--{{objAct.endtime}}
					</view>
				</view> -->
			</view>
			<view class="contentBox2">
				<view class="contentBox1Title">
					<view class="wire">
		
					</view>
					<view class="title">
						活动区域
					</view>
				</view>
				<view class="titleBox">
					{{objAct.region}}
				</view>
			</view>
			
			<view class="contentBox3">
				<view class="contentBox1Title">
					<view class="wire">
		
					</view>
					<view class="title">
						活动要求
					</view>
				</view>
				
				<view class="contentWord">
			{{objAct.requirement}}
				</view>
			</view>
				<view class="contentBox3" v-if="status==3">
					<view class="contentBox1Title">
						<view class="wire">
				
						</view>
						<view class="title">
							拒绝原因
						</view>
					</view>
					
					<view class="contentWord">
						{{obj.qu_refuse}}
					</view>
				</view>
				<!-- <view class="contentBox3a" v-if="status==1">
					<view class="contentBox1Title">
						<view class="wire">
				
						</view>
						<view class="title">
							活动延长
						</view>
					</view>
					<view class="xTitle">
						<view class="xTitleW">
							活动延长时间
						</view>
						<view class="xTitleC">
							2021-11-12
						</view>
					</view>
					<view class="contentWord">
						活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求活动要求。
					</view>
				</view> -->
				<!-- 审核 -->
				
		</view>
		<view class="liecan" v-if="status==1">
			<view class="qu" @click="examineCLik">通过</view>
			<view class="que" @click="refuseClick">拒绝</view>				
		</view>	
		<!-- 拒绝弹窗 -->
		<view class="dataMask" v-if="refuseShow">
			<view class="dataMaskContent">
				<view class="tite_list">
					拒绝原因
				</view>
				<image @click="clooseCLick" src="/static/pages/index/cloose.png" class="clooseImg"  mode=""></image>
				<textarea v-model="refuse" class="refuseBox" placeholder="请输入拒绝原因" />
				<view class="refuseBtn" @click="quedingClick">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {regionToExamineDetails,regionexamineBox} from '@/request/api.js';
	export default {
		data() {
			return {
				stores:'', //店铺名称
				status:'',//状态
				id:'',
				obj:{
					
				},
				objAct:{},
				refuse:'',
				refuseShow:false
			};
		},
		onLoad(option) {
			// console.log(option)
			// this.status=option.status;
			this.id = option.id;
			this.stores = option.stores;
			this.init()
		},
		onShow() {
			
		},
		methods:{
			init(){
				let _this = this;
				let data ={
					id:this.id
				}
				regionToExamineDetails(data).then(res=>{
					if(res.code==1){
						// console.log(res.data,'1111111111');
						_this.obj=res.data;
						_this.objAct=_this.obj.activity;
						
						_this.status=res.data.qu_status;
						_this.objAct.starttime=_this.formatDate(_this.objAct.starttime)
						_this.objAct.endtime=_this.formatDate(_this.objAct.endtime)
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			formatDate: function(value) {
				let date = new Date(value * 1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// console.log(y + '-' + MM + '-' + d);
				return y + '-' + MM + '-' + d; //年月日
					
			},
			examineCLik(){
				let _this = this;
				let data ={
					examine:'2',
					id:_this.id,
					refuse:''
				}
				regionexamineBox(data).then(res=>{
					if(res.code==1){
						console.log(res)
						uni.navigateBack({
							delta:1
						})
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						})
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			refuseClick(){
				this.refuseShow=true;
			},
			clooseCLick(){
				this.refuseShow=false
			},
			quedingClick(){
				let _this = this
				if(this.refuse==''){
					uni.showToast({
						title:"拒绝原因不能为空",
						icon:"none"
					})
					return
				}
				let data ={
					examine:'3',
					id:_this.id,
					refuse:_this.refuse
				}
				regionexamineBox(data).then(res=>{
					if(res.code==1){
						// console.log(res)
						_this.refuseShow=false
						uni.navigateBack({
							delta:1
						})
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						})
					}
				}).catch(err=>{
					console.log(err)
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
.detailsBox{
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 40rpx;
	overflow: hidden;
	.detailsNav{
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		
		.staBox{
			width: 120rpx;
			height: 50rpx;
			background: #F69518;
			border-radius: 0rpx 25rpx 0rpx 25rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F5F5F5;
			line-height: 50rpx;
			text-align: center;
			margin: 35rpx 0 0 40rpx;
		}
		.staBoxa{
			width: 120rpx;
			height: 50rpx;
			background: #1855F6;
			border-radius: 0rpx 25rpx 0rpx 25rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F5F5F5;
			line-height: 50rpx;
			text-align: center;
			margin: 35rpx 0 0 40rpx;
		}
		.staBoxb{
			width: 120rpx;
			height: 50rpx;
			background: #f61861;
			border-radius: 0rpx 25rpx 0rpx 25rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F5F5F5;
			line-height: 50rpx;
			text-align: center;
			margin: 35rpx 0 0 40rpx;
		}
		.modifyImg{
			width: 48rpx;
			height: 48rpx;
			margin-right: 40rpx;
			margin-top: 36rpx;
		}
	}
	.detailsContent{
		width: 100%;
		overflow: hidden;
		.detislNa{
			display: flex;
			margin-top: 60rpx;
			.na{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin-left: 40rpx;
			}
			.naC{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin-left: 186rpx;
			}
		}
		.detislNaa{
			display: flex;
			margin-top: 60rpx;
			.na{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin-left: 40rpx;
			}
			.naC{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin-left: 113rpx;
			}
		}
		.detislNas{
			display: flex;
			margin-top: 60rpx;
			.na{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin-left: 40rpx;
			}
			.naC{
				width: 394rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #303133;
				margin-left: 186rpx;
				word-wrap:break-word;
				line-height: 55rpx;
			}
		}
	}
}
.contentBox {
			width: 670rpx;
			margin: 30rpx auto 0;

			.contentBox1 {
				.contentBox1Titles{
					width: 100%;
					height: 100rpx;
					border-bottom: 1px solid #F2F2F4;
					display: flex;
					justify-content: space-between;
					.contentBox1Title {
						display: flex;
						.wire {
							width: 4rpx;
							height: 36rpx;
							background: #2E2F33;
							border-radius: 2rpx;
							margin: 32rpx 0 0 24rpx;
						}
					
						.title {
							// line-height: 100rpx;
							font-size: 38rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #2E2F33;
							margin: 25rpx 0 0 14rpx;
						}
					}
					.modifyImg{
						width: 34rpx;
						height: 34rpx;
						margin: 33rpx 24rpx 0 0;
					}
				}
				.titleBox {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2E2F33;
					margin: 30rpx 0 9rpx 26rpx;
				}

				.funds {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #F2F2F4;

					.fundsW1 {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						line-height: 100rpx;
						margin-left: 25rpx;
					}

					.fundsW2 {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						line-height: 100rpx;
						margin-right: 25rpx;
					}
				}

				.quota {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #F2F2F4;

					.quotaW1 {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						line-height: 100rpx;
						margin-left: 25rpx;
					}

					.quotaW2 {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						line-height: 100rpx;
						margin-right: 25rpx;
					}
				}
			}

			.contentBox2 {
				.contentBox1Title {
					width: 100%;
					height: 100rpx;
					border-bottom: 1px solid #F2F2F4;
					display: flex;

					.wire {
						width: 4rpx;
						height: 36rpx;
						background: #2E2F33;
						border-radius: 2rpx;
						margin: 32rpx 0 0 24rpx;
					}

					.title {
						// line-height: 100rpx;
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						margin: 25rpx 0 0 14rpx;
					}
				}

				.titleBox {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2E2F33;
					margin: 30rpx 0 9rpx 26rpx;
				}
			}

			.contentBox3 {
				.contentBox1Title {
					width: 100%;
					height: 100rpx;
					border-bottom: 1px solid #F2F2F4;
					display: flex;

					.wire {
						width: 4rpx;
						height: 36rpx;
						background: #2E2F33;
						border-radius: 2rpx;
						margin: 32rpx 0 0 24rpx;
					}

					.title {
						// line-height: 100rpx;
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						margin: 25rpx 0 0 14rpx;
					}
				}

				.contentWord {
					width: 620rpx;
					margin: 26rpx auto 0;
					
					word-break: normal|break-all|keep-all;
					word-wrap: break-word;
				}
			}
			.contentBox3a{
				.contentBox1Title {
					width: 100%;
					height: 100rpx;
					border-bottom: 1px solid #F2F2F4;
					display: flex;
				
					.wire {
						width: 4rpx;
						height: 36rpx;
						background: #2E2F33;
						border-radius: 2rpx;
						margin: 32rpx 0 0 24rpx;
					}
				
					.title {
						// line-height: 100rpx;
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						margin: 25rpx 0 0 14rpx;
					}
				}
				.xTitle{
					display: flex;
					margin-top: 40rpx;
					justify-content: space-between;
					.xTitleW{
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						margin-left: 26rpx;
					}
					.xTitleC{
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						margin-right: 35rpx;
					}
				}
				.contentWord {
					width: 620rpx;
					margin: 26rpx auto 0;
					word-break: normal|break-all|keep-all;
					word-wrap: break-word;
				}
			}
				


			.contentBox4 {
				.contentBox1Title {
					width: 100%;
					height: 100rpx;
					border-bottom: 1px solid #F2F2F4;
					display: flex;

					.wire {
						width: 4rpx;
						height: 36rpx;
						background: #2E2F33;
						border-radius: 2rpx;
						margin: 32rpx 0 0 24rpx;
					}

					.title {
						// line-height: 100rpx;
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2E2F33;
						margin: 25rpx 0 0 14rpx;
					}
				}

				.stage1 {
					width: 100%;
					display: flex;
					margin-top: 40rpx;

					.stage1Box {
						width: 40rpx;
						height: 40rpx;
						background: #1855F6;
						border-radius: 50%;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						margin-left: 24rpx;
					}

					.stage1BoxWord {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #2E2F33;
						margin-left: 26rpx;
						margin-top: -4rpx;
					}
				}

				.stage1Contnet {
					width: 100%;
					height: 140rpx;
					display: flex;
					margin-top: 20rpx;

					.stage1ContnetWire {
						width: 2rpx;
						height: 140rpx;
						background: #1855F6;
						margin-left: 43rpx;
					}

					.stage1ContnetWord {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 140rpx;
						margin-left: 44rpx;
					}
				}

				.stage1Contnet1 {
					width: 100%;
					height: 140rpx;
					display: flex;
					margin-top: 20rpx;

					.stage1ContnetWord {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 140rpx;
						margin-left: 89rpx;
					}
				}
			}
		}
	.liecan{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 80rpx;
		.qu{
			padding: 20rpx 70rpx;
			background: rgba(24, 85, 246, 1);
			font-size: 30rpx;
			border-radius: 3000rpx;
			color: #fff;
		}
		.que{
			padding: 20rpx 70rpx;
			background: rgba(216, 222, 240, 1);
			font-size: 30rpx;
			border-radius: 3000rpx;
			color: rgba(24, 85, 246, 1);
		}
	}
	.dataMask{
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.3);
		position: fixed;
		top: 0;
		left: 0;
		.dataMaskContent{
			width: 670rpx;
			height: 620rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%);
			.tite_list{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2E2F33;
				line-height: 42rpx;
				text-align: center;
				margin-top: 40rpx;
			}
			.clooseImg{
				position: absolute;
				top: 20rpx;
				right: 24rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.refuseBox{
				width: 618rpx;
				height: 340rpx;
				background: #FFFFFF;
				border: 1px solid #CED0D6;
				border-radius: 8rpx;
				margin: 60rpx auto 0;
			}
			.refuseBtn{
				width: 340rpx;
				height: 70rpx;
				background: #1855F6;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 70rpx;
				margin: 40rpx auto;
				text-align: center;
			}
		}
	}
</style>
